$control-calendar: (text-color: getCssVar(color-text-0),
hover-bg-color: getCssVar(color, fill, 0),
active-bg-color: getCssVar(color, fill, 0),
border-color: getCssVar(color, primary, active),
font-size: getCssVar(font-size, small),
item-padding: getCssVar(spacing, tight),
border-radius: getCssVar(border-radius, small),
margin: getCssVar(spacing, extra-tight),
);

@include b(control-calendar) {
  @include set-component-css-var(control-calendar, $control-calendar);

  width: 100%;
  height: 100%;

  @include e(calendar-item) {
    display: flex;
    align-items: center;
    padding: getCssVar(control-calendar, item-padding);
  }

  @include e(icon) {
    width: 10px;
    height: 10px;
    margin-right: getCssVar(spacing, base-tight);
    border-radius: 50%;
  }

  .#{bem(control-calendar-item)} {
    margin: 0;
  }
}


@include b(control-calendar-content) {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .el-calendar {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .el-calendar__header {
    flex-wrap: wrap;
  }

  .el-calendar-table,
  .el-calendar-table .el-calendar-day {
    width: 100%;
    height: 100%;
    min-height: 90px;
    cursor: pointer;
  }

  .el-calendar-table {
    flex: 1;
    width: fit-content;
  }

  .el-calendar-table .el-calendar-day:hover {
    cursor: pointer;
    background-color: var(--el-calendar-selected-bg-color);

  }

  .el-calendar__body {
    display: flex;
    flex: 1;
    padding: 0;
    overflow: auto;
  }

}

@include b(control-calendar-more) {
  width: 100%;
  font-size: getCssVar(font-size, small);
  border-radius: getCssVar(spacing, extra-tight);

  &:hover {
    background-color: getCssVar(control-calendar, hover-bg-color);
  }
}

@include b(control-calendar-item) {
  @include set-component-css-var(control-calendar, $control-calendar);

  height: 100%;
  padding: getCssVar(control-calendar, item-padding);
  margin-bottom: getCssVar(control-calendar, margin);
  overflow: hidden;
  font-size: getCssVar(control-calendar, font-size);
  color: getCssVar(control-calendar, text-color);
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  border: solid .5px transparent;
  border-radius: getCssVar(control-calendar, border-radius);

  &:hover {
    background-color: getCssVar(control-calendar, hover-bg-color);
  }

  @include when(active) {
    background-color: getCssVar(control-calendar, active-bg-color);
    border: solid 0.5px getCssVar(control-calendar, border-color);
  }
}

@include b(control-calendar-date-text) {
  @include set-component-css-var(control-calendar, $control-calendar);

  padding-bottom: getCssVar(control-calendar, item-padding);
  margin: 0;
  text-align: center;
}

@include b(control-calendar-day) {
  height: fit-content;
}

@include b(control-calendar-content-title) {
  line-height: getCssVar(editor, default, line-height);
}

@include b(control-calendar-content-header) {
  @include set-component-css-var(control-calendar, $control-calendar);

  display: flex;
  align-items: center;

  & > * + *{
    margin-left: getCssVar(control-calendar, item-padding);
  }
}

@include b(control-calendar-legend) {
  display: flex;
  justify-content: flex-end;
  width: 100%;

  & > * + *{
    margin-left: getCssVar(spacing, base-loose);
  }
}

@include b(control-calendar-timeline-content){
  .el-timeline{
    padding-left: 0;
  }
}